<template>
  <div>
    <Echart
        :options="options1"
        class="centreLeft1Chart"
        height="250px"
        width="50%"
    ></Echart>
    <Echart
        :options="options2"
        class="centreLeft1Chart"
        height="250px"
        width="50%"
    ></Echart>
    <a-row>
      <a-col :span="12" class="charts-type">场景类型</a-col>
      <a-col :span="12" class="charts-type">场景使用率</a-col>
    </a-row>
  </div>
</template>

<script>
// import Chart from '@/components/echart/centerLeft/centerLeft1Chart/chart.vue';
import Echart from '@/common/echart'
const cdata = {
  xData: ['唐宋明清场景', '春秋战国场景', '年代场景', '外景地', '摄影棚', '都市场景', '高科技摄影棚'],
  seriesData: [
    { value: 33, name: "唐宋明清场景" },
    { value: 22, name: '春秋战国场景' },
    { value: 15, name: '年代场景' },
    { value: 12, name: '外景地' },
    { value: 11, name: '摄影棚' },
    { value: 5, name: '都市场景' },
    { value: 2, name: '高科技摄影棚' }
  ]
}
const newData = 87
const colorObj = {
  textStyle: "#3fc0fb",
  series: {
    color: ["#00bcd44a", "transparent"],
    dataColor: {
     normal: "#03a9f4",
      shadowColor: "#97e2f5"
    }
  }
}

export default {
  data () {
    return {
      newData: 50,
      colorObj: {
        textStyle: "#3fc0fb",
        series: {
          color: ["#00bcd44a", "transparent"],
          dataColor: {
            normal: "#03a9f4",
            shadowColor: "#97e2f5"
          }
        }
      },
      options1: {
        color: [
          "#37a2da",
          "#32c5e9",
          "#9fe6b8",
          "#ffdb5c",
          "#ff9f7f",
          "#fb7293",
          "#e7bcf3",
          "#8378ea"
        ],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {d}%"
        },
        toolbox: {
          show: true
        },
        calculable: true,
        // legend: {
        //   orient: "horizontal",
        //   icon: "circle",
        //   bottom: 0,
        //   x: "center",
        //   data: ["唐宋", "现代", "高科技摄影", "普通摄影", "其他"],
        //   textStyle: {
        //     color: "#fff"
        //   }
        // },
        series: [
          {
            name: "场景类型",
            type: "pie",
            radius: [10, 60],
            roseType: "area",
            center: ["50%", "50%"],
            data: cdata.seriesData
          },
        ]
      },
      options2: {
        title:{
          text: newData + '%',
          x: "center",
          y: "center",
          textStyle: {
            color: colorObj.textStyle,
            fontSize: 28
          }
        },
        series: [
          {
            type: "pie",
            radius: ["55%", "65%"],
            center: ["50%", "50%"],
            hoverAnimation: false,
            color: colorObj.series.color,
            label: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: newData,
                itemStyle: {
                  normal: {
                    color: colorObj.series.dataColor.normal,
                    shadowBlur: 10,
                    shadowColor: colorObj.series.dataColor.shadowColor
                  }
                }
              },
              {
                value: 100 - newData
              }
            ]
          }
        ]
      }
    }
  },
  components: {
    Echart,
  },
  mounted () {
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.centreLeft1Chart {
  display: inline-block;
  width: 50%;
}
.charts-type {
  position: relative;
  top: -20px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
}
</style>
